/*------------------------------------
accordion
------------------------------------*/

.accordion {
  .card {
    border-color: $border-color;
    p {
      color: $gray-dark;
    }
  }

  .card-header {
    padding: 0;
    border-color: $border-color;
    h6 {
      font: {
        size: 16px;
        weight: normal;
      }
      margin-bottom: 0;
    }
    a {
      position: relative;
      display: block;
      padding: 1.2rem 1.5rem;
      cursor: pointer;
      border-radius: 4px 4px 0 0;
      background: #fff;
      color: $primary-color;
      &:hover {
        color: $primary-color;
      }
    }
    .collapsed {
      color: $dark;
      &:after {
        content: "\e943";
      }
    }
  }

  .accordion-list {
    list-style: none;
    li {
      margin-bottom: 0.5rem;
      a {
        color: $gray-dark;
        i {
          font-size: 14px;
        }
        &:hover {
          color: $primary-color;
          text-decoration: none;
        }
      }
    }
  }
}

//accordion style 1
.accordion.accordion-style-1 {
  .card-header {
    a {
      background: #fff;
      color: $primary-color;
      &:hover {
        color: $primary-color;
        &:after {
          border: 1px solid $primary-color;
          background: $primary-color;
          color: $white;
          transition: all 0.3s;
        }
      }
    }
    .collapsed {
      color: $dark;
      &:after {
        content: "\e943";
        border: 1px solid $gray;
        background: $white;
        color: $gray-dark;
      }
    }
  }
}

//accordion style 2
.accordion.accordion-style-2 {
  .card {
    margin-bottom: 10px;
    border-radius: 4px;
    .card-header {
      margin-bottom: 0px;
      border: none;
      background: transparent;
      a {
        &:after {
          font: {
            size: 14px;
            family: "fontawesome";
          }
          position: absolute;
          top: 35%;
          right: 20px;
          content: "\f107";
        }
      }
      a.collapsed {
        position: relative;
        border-radius: 4px;
        &:after {
          content: "\f105";
        }
      }
    }
  }
  .card:not(:first-of-type):not(:last-of-type) {
    border-radius: 4px;
  }
  .card:first-of-type,
  .card:not(:first-of-type):not(:last-of-type) {
    border-bottom: 1px solid $border-color;
  }
}

//accordion style 3
.accordion.accordion-style-3 {
  .card,
  .card-header,
  .card-header a {
    border: none;
    background: transparent;
  }
  .card-header {
    a {
      padding: 1.2rem 0 1.2rem 4rem;
      color: $primary-color;
      &:before {
        width: 40px;
        height: 40px;
        line-height: 40px;
        text-align: center;
        background: $primary-color;
        color: $white;
        border-radius: 50%;
        font: {
          size: 14px;
          family: "fontawesome";
        }
        position: absolute;
        top: 8px;
        left: 5px;
        content: "\f107";
      }
      &:after {
        content: "";
      }
    }
    .collapsed {
      color: $dark;
      &:before {
        content: "\f105";
        width: 40px;
        height: 40px;
        line-height: 38px;
        text-align: center;
        background: $white;
        color: $dark;
        border-radius: 50%;
        border: 1px solid lighten($border-color, 5%);
        box-shadow: 0px 3px 6px 0px rgba(0, 0, 0, 0.05);
      }
    }
  }

  .card-body {
    padding: 1.25rem 0 1.25rem 4rem;
  }
}

//accordion style 4

.accordion.accordion-style-4 {
  .card {
    margin-bottom: 10px;
    border-radius: 4px;
    .card-header {
      margin-bottom: 0px;
      border: none;
      background: transparent;
      position: relative;
      a {
        color: $dark;
        padding: 2.5rem 1.5rem;
        font-weight: bold;
      }
      a.collapsed {
        position: relative;
        border-radius: 4px;
        &:after {
          content: "\e942";
        }
      }
      i {
        position: absolute;
        top: 28px;
        color: $primary-color;
      }
      span {
        padding-left: 3rem;
      }
    }
  }
  .card:not(:first-of-type):not(:last-of-type) {
    border-radius: 4px;
  }
  .card:first-of-type,
  .card:not(:first-of-type):not(:last-of-type) {
    border-bottom: 1px solid $border-color;
  }
}
